<!-- 模块说明 -->
<template>
    <div>
        <van-form>
            <van-field v-model="tel" name="tel" :rules="[{ validator, message: '请输入正确手机号', trigger: 'onChange' }]"
                placeholder="请输入手机号" />
            <van-button @click="tostep2" type="danger" :disabled="isNoTel" size="small">下一步</van-button>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getDel } from '../../api/register';
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant';
//提示信息
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter()
const tel = ref<any>()
const isNoTel = ref<boolean>(true)
//验证手机号正则
const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 函数验证
const validator = (val: any) => {
    if (pattern.test(val)) {
        isNoTel.value = false
        return true
    }
    isNoTel.value = true
    return false
}
const tostep2 = () => {
    showConfirmDialog({
        title: '提示',
        message:
            `将向手机号:${tel.value}  发送短信验证`,
    })
        .then(() => {
            router.push({ path: '/register/step2', query: { tel: tel.value } })
        })
        .catch(() => {
            // on cancel
        });
}
//验证手机号是否可以注册
// const getDels = async (del: string) => {
//     let res = await getDel(del)
//     tel.value = res.data.data
//     console.log(res, "res")
// }
</script>
<style lang="scss" scoped>
.van-button {
    width: 100%;
    margin-top: 20px;
}
</style>
